<template>
  <div>
    <div class="momentContainer" v-for="item in replyList" :key="item.id" @click="toDetail(item.id)">
      <div class="title">
        {{item.title}}
      </div>
      <div class="footerArea">
        <span>回复帖子{{passTime(item.commentCreateAt)}}</span>
        <span> · <i class="iconfont icon-lianjie"></i>原贴地址</span>
      </div>
    </div>
  </div>
</template>

<script>
import passTime from '../utils/passTime'
export default {
  props: {
    replyList: {
      type: Array
    }
  },
  methods: {
    toDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    passTime
  }
}
</script>

<style scoped lang="less">
  .momentContainer {
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
    :hover {
      cursor: pointer;
    }
    .title {
      margin-bottom: 10px;
      color: #222226;
      line-height: 24px;
      font-size: 16px;
      overflow: hidden;
      white-space: normal;
      word-break: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      max-height: 48px;
    }
    .footerArea {
      color: #555666;
      font-size: 14px;
      font-weight: 400;
    }
  }

</style>
